<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站广告推荐</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #818cf8;
            --secondary: #10b981;
            --light: #f3f4f6;
            --dark: #1e293b;
            --gray: #64748b;
            --light-gray: #e2e8f0;
            --danger: #ef4444;
            --warning: #f59e0b;
            --transition: all 0.25s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #f8fafc;
            color: var(--dark);
            line-height: 1.6;
            padding: 30px 0;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .section-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 30px;
            padding-bottom: 10px;
            border-bottom: 3px solid var(--primary);
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-description {
            color: var(--gray);
            margin-bottom: 30px;
            max-width: 800px;
        }
        
        .ad-label {
            position: absolute;
            top: 12px;
            left: 12px;
            background-color: var(--warning);
            color: white;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 4px;
            z-index: 10;
        }
        
        /* 通用广告卡片样式 */
        .ad-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: var(--transition);
            margin-bottom: 20px;
            position: relative;
        }
        
        .ad-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .ad-content {
            padding: 20px;
        }
        
        .ad-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 10px;
            line-height: 1.4;
        }
        
        .ad-description {
            color: var(--gray);
            margin-bottom: 15px;
            line-height: 1.6;
        }
        
        .ad-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 15px;
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .ad-author {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            flex: 1;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .author-role {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .ad-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 500;
            transition: var(--transition);
            cursor: pointer;
            border: none;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-light);
        }
        
        .btn-outline {
            background-color: transparent;
            color: var(--gray);
            border: 1px solid var(--light-gray);
        }
        
        .btn-outline:hover {
            background-color: var(--light);
        }
        
        /* 多种布局样式 */
        /* 1. 大图布局 */
        .ad-large {
            display: flex;
            flex-direction: column;
        }
        
        .ad-large .ad-image-container {
            height: 300px;
            position: relative;
        }
        
        .ad-large .ad-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 2. 多图布局 */
        .ad-multi {
            display: flex;
            flex-direction: column;
        }
        
        .ad-multi .ad-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            height: 200px;
            position: relative;
        }
        
        .ad-multi .ad-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 3. 无图布局 */
        .ad-no-image {
            border-left: 4px solid var(--primary);
        }
        
        /* 4. 左图右文布局 */
        .ad-side-by-side {
            display: flex;
        }
        
        .ad-side-by-side .ad-image-container {
            flex: 0 0 35%;
            position: relative;
        }
        
        .ad-side-by-side .ad-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .ad-side-by-side .ad-content {
            flex: 1;
        }
        
        /* 5. 网格布局 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .grid-layout .ad-card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .grid-layout .ad-image-container {
            height: 180px;
            position: relative;
        }
        
        .grid-layout .ad-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .grid-layout .ad-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .grid-layout .ad-actions {
            margin-top: auto;
        }
        
        /* 6. 轮播布局 */
        .carousel-layout {
            margin-bottom: 40px;
        }
        
        .carousel-control-prev,
        .carousel-control-next {
            width: 5%;
        }
        
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            width: 40px;
            height: 40px;
        }
        
        /* 交互效果 */
        .like-btn.active i {
            color: var(--danger);
        }
        
        .save-btn.active i {
            color: var(--primary);
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .ad-side-by-side {
                flex-direction: column;
            }
            
            .ad-side-by-side .ad-image-container {
                flex: none;
                height: 200px;
            }
        }
        
        @media (max-width: 768px) {
            .grid-layout {
                grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
            }
            
            .ad-multi .ad-images {
                grid-template-columns: repeat(2, 1fr);
                height: 160px;
            }
            
            .ad-large .ad-image-container {
                height: 200px;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="section-title">
            <i class="fas fa-bullhorn text-primary"></i> 推荐内容
        </h1>
        <p class="section-description">
            发现个性化推荐的精彩内容，包括精选广告和热门帖子。这些内容基于您的兴趣和浏览历史精心挑选。
        </p>
        
        <!-- 大图布局广告 -->
        <h2 class="h4 mb-3 text-muted">特色推荐</h2>
        <div class="ad-card ad-large mb-5">
            <div class="ad-image-container">
                <span class="ad-label">推广</span>
                <img src="https://picsum.photos/id/239/1200/400" alt="夏季旅游套餐宣传" class="ad-image">
            </div>
            <div class="ad-content">
                <h3 class="ad-title">夏季海岛度假套餐限时优惠 - 两人同行一人半价</h3>
                <p class="ad-description">
                    探索世界顶级海岛度假胜地，享受阳光沙滩和清澈海水。本季特别推出优惠活动，预订7天以上行程即可享受两人同行一人半价，还可免费升级海景房。活动截止至8月31日，立即预订锁定优惠！
                </p>
                <div class="ad-meta">
                    <div class="meta-item">
                        <i class="far fa-eye"></i> 12.5k 浏览
                    </div>
                    <div class="meta-item">
                        <i class="far fa-comment"></i> 342 评论
                    </div>
                    <div class="meta-item">
                        <i class="far fa-heart"></i> 2.1k 点赞
                    </div>
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i> 2天前
                    </div>
                </div>
                <div class="ad-author">
                    <img src="https://picsum.photos/id/1025/100/100" alt="环球旅行官方账号头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">环球旅行官方账号</div>
                        <div class="author-role">旅游服务 · 官方认证</div>
                    </div>
                    <button class="action-btn btn-outline">
                        <i class="far fa-user-plus"></i> 关注
                    </button>
                </div>
                <div class="ad-actions">
                    <button class="action-btn btn-primary">
                        <i class="fas fa-external-link-alt"></i> 了解详情
                    </button>
                    <button class="action-btn btn-outline like-btn">
                        <i class="far fa-heart"></i> 点赞
                    </button>
                    <button class="action-btn btn-outline save-btn">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 轮播布局广告 -->
        <h2 class="h4 mb-3 text-muted">热门活动</h2>
        <div class="carousel-layout">
            <div id="adsCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <!-- 轮播项1 -->
                    <div class="carousel-item active">
                        <div class="ad-card ad-side-by-side">
                            <div class="ad-image-container">
                                <span class="ad-label">推广</span>
                                <img src="https://picsum.photos/id/96/600/400" alt="音乐节宣传" class="ad-image">
                            </div>
                            <div class="ad-content">
                                <h3 class="ad-title">2023夏季音乐节 - 早鸟票限时抢购</h3>
                                <p class="ad-description">
                                    年度最大规模音乐节即将开幕，汇集国内外顶级音乐人，3天不间断精彩演出。早鸟票限时7折优惠，数量有限，先到先得。购票即送官方周边礼包。
                                </p>
                                <div class="ad-meta">
                                    <div class="meta-item">
                                        <i class="far fa-eye"></i> 8.7k 浏览
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-comment"></i> 215 评论
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-heart"></i> 1.5k 点赞
                                    </div>
                                </div>
                                <div class="ad-author">
                                    <img src="https://picsum.photos/id/1074/100/100" alt="星光娱乐头像" class="author-avatar">
                                    <div class="author-info">
                                        <div class="author-name">星光娱乐</div>
                                        <div class="author-role">文化活动 · 官方认证</div>
                                    </div>
                                </div>
                                <div class="ad-actions">
                                    <button class="action-btn btn-primary">
                                        <i class="fas fa-ticket-alt"></i> 购票
                                    </button>
                                    <button class="action-btn btn-outline like-btn">
                                        <i class="far fa-heart"></i> 点赞
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 轮播项2 -->
                    <div class="carousel-item">
                        <div class="ad-card ad-side-by-side">
                            <div class="ad-image-container">
                                <span class="ad-label">推广</span>
                                <img src="https://picsum.photos/id/26/600/400" alt="新手机发布宣传" class="ad-image">
                            </div>
                            <div class="ad-content">
                                <h3 class="ad-title">全新X10 Pro手机 - 预购享多重好礼</h3>
                                <p class="ad-description">
                                    新一代旗舰手机X10 Pro震撼发布，搭载最新处理器和AI摄影系统，续航提升30%。即日起预购可享受首发特惠价，赠送原装耳机和无线充电器，还有机会赢取出国游大奖。
                                </p>
                                <div class="ad-meta">
                                    <div class="meta-item">
                                        <i class="far fa-eye"></i> 24.3k 浏览
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-comment"></i> 876 评论
                                    </div>
                                    <div class="meta-item">
                                        <i class="far fa-heart"></i> 5.2k 点赞
                                    </div>
                                </div>
                                <div class="ad-author">
                                    <img src="https://picsum.photos/id/1066/100/100" alt="未来科技官方账号头像" class="author-avatar">
                                    <div class="author-info">
                                        <div class="author-name">未来科技官方账号</div>
                                        <div class="author-role">电子产品 · 官方认证</div>
                                    </div>
                                </div>
                                <div class="ad-actions">
                                    <button class="action-btn btn-primary">
                                        <i class="fas fa-shopping-cart"></i> 预购
                                    </button>
                                    <button class="action-btn btn-outline like-btn">
                                        <i class="far fa-heart"></i> 点赞
                                    </button>
                                    <button class="action-btn btn-outline save-btn">
                                        <i class="far fa-bookmark"></i> 收藏
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <button class="carousel-control-prev" type="button" data-bs-target="#adsCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#adsCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        
        <!-- 网格布局广告 -->
        <h2 class="h4 mb-3 text-muted">为你推荐</h2>
        <div class="grid-layout">
            <!-- 网格广告1 - 多图 -->
            <div class="ad-card ad-multi">
                <div class="ad-images">
                    <span class="ad-label">推广</span>
                    <img src="https://picsum.photos/id/431/300/300" alt="夏季服装展示1" class="ad-image">
                    <img src="https://picsum.photos/id/331/300/300" alt="夏季服装展示2" class="ad-image">
                    <img src="https://picsum.photos/id/349/300/300" alt="夏季服装展示3" class="ad-image">
                </div>
                <div class="ad-content">
                    <h3 class="ad-title">夏季新品服饰全场7折起 - 限时3天</h3>
                    <p class="ad-description">
                        夏季新款服饰全面上市，精选面料舒适透气，多种风格满足不同需求。新会员注册即送20元优惠券。
                    </p>
                    <div class="ad-meta">
                        <div class="meta-item">
                            <i class="far fa-eye"></i> 5.2k 浏览
                        </div>
                        <div class="meta-item">
                            <i class="far fa-heart"></i> 896 点赞
                        </div>
                    </div>
                    <div class="ad-author">
                        <img src="https://picsum.photos/id/1083/100/100" alt="时尚前线头像" class="author-avatar">
                        <div class="author-name">时尚前线</div>
                    </div>
                    <div class="ad-actions">
                        <button class="action-btn btn-primary">
                            <i class="fas fa-shopping-bag"></i> 进店
                        </button>
                        <button class="action-btn btn-outline like-btn">
                            <i class="far fa-heart"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 网格广告2 - 无图 -->
            <div class="ad-card ad-no-image">
                <div class="ad-content">
                    <span class="ad-label">推广</span>
                    <h3 class="ad-title">专业摄影课程 - 零基础入门到精通</h3>
                    <p class="ad-description">
                        由国际知名摄影师亲自授课，12周系统课程+实践指导，帮助你快速掌握摄影技巧，拍出专业级作品。现在报名立减300元。
                    </p>
                    <div class="ad-meta">
                        <div class="meta-item">
                            <i class="far fa-eye"></i> 3.7k 浏览
                        </div>
                        <div class="meta-item">
                            <i class="far fa-comment"></i> 156 评论
                        </div>
                    </div>
                    <div class="ad-author">
                        <img src="https://picsum.photos/id/1062/100/100" alt="光影摄影学院头像" class="author-avatar">
                        <div class="author-name">光影摄影学院</div>
                    </div>
                    <div class="ad-actions">
                        <button class="action-btn btn-primary">
                            <i class="fas fa-graduation-cap"></i> 了解课程
                        </button>
                        <button class="action-btn btn-outline save-btn">
                            <i class="far fa-bookmark"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 网格广告3 - 单图 -->
            <div class="ad-card">
                <div class="ad-image-container">
                    <span class="ad-label">推广</span>
                    <img src="https://picsum.photos/id/292/600/400" alt="有机食品展示" class="ad-image">
                </div>
                <div class="ad-content">
                    <h3 class="ad-title">有机食品礼盒 - 健康生活新选择</h3>
                    <p class="ad-description">
                        精选有机蔬果和天然食材，无农药无添加，健康安全。适合送礼和家庭日常食用，满200元包邮。
                    </p>
                    <div class="ad-meta">
                        <div class="meta-item">
                            <i class="far fa-eye"></i> 2.8k 浏览
                        </div>
                        <div class="meta-item">
                            <i class="far fa-heart"></i> 542 点赞
                        </div>
                    </div>
                    <div class="ad-author">
                        <img src="https://picsum.photos/id/1080/100/100" alt="绿色农场头像" class="author-avatar">
                        <div class="author-name">绿色农场</div>
                    </div>
                    <div class="ad-actions">
                        <button class="action-btn btn-primary">
                            <i class="fas fa-shopping-cart"></i> 购买
                        </button>
                        <button class="action-btn btn-outline like-btn">
                            <i class="far fa-heart"></i>
                        </button>
                        <button class="action-btn btn-outline save-btn">
                            <i class="far fa-bookmark"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 多图布局广告 -->
        <h2 class="h4 mb-3 text-muted">精选活动</h2>
        <div class="ad-card ad-multi mb-5">
            <div class="ad-images">
                <span class="ad-label">推广</span>
                <img src="https://picsum.photos/id/1059/400/400" alt="艺术展览作品1" class="ad-image">
                <img src="https://picsum.photos/id/1058/400/400" alt="艺术展览作品2" class="ad-image">
                <img src="https://picsum.photos/id/1057/400/400" alt="艺术展览作品3" class="ad-image">
                <img src="https://picsum.photos/id/1056/400/400" alt="艺术展览作品4" class="ad-image">
                <img src="https://picsum.photos/id/1055/400/400" alt="艺术展览作品5" class="ad-image">
                <img src="https://picsum.photos/id/1054/400/400" alt="艺术展览作品6" class="ad-image">
            </div>
            <div class="ad-content">
                <h3 class="ad-title">当代艺术大展 - 探索未来美学</h3>
                <p class="ad-description">
                    汇集全球50位知名艺术家的120件作品，涵盖绘画、雕塑、装置艺术等多种形式。展览将持续一个月，周末还有艺术家现场讲解活动。学生票享5折优惠。
                </p>
                <div class="ad-meta">
                    <div class="meta-item">
                        <i class="far fa-eye"></i> 6.3k 浏览
                    </div>
                    <div class="meta-item">
                        <i class="far fa-comment"></i> 278 评论
                    </div>
                    <div class="meta-item">
                        <i class="far fa-heart"></i> 1.2k 点赞
                    </div>
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i> 5天前
                    </div>
                </div>
                <div class="ad-author">
                    <img src="https://picsum.photos/id/1082/100/100" alt="现代艺术馆头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">现代艺术馆</div>
                        <div class="author-role">文化机构 · 官方认证</div>
                    </div>
                    <button class="action-btn btn-outline">
                        <i class="far fa-user-plus"></i> 关注
                    </button>
                </div>
                <div class="ad-actions">
                    <button class="action-btn btn-primary">
                        <i class="fas fa-ticket-alt"></i> 购票参观
                    </button>
                    <button class="action-btn btn-outline like-btn">
                        <i class="far fa-heart"></i> 点赞
                    </button>
                    <button class="action-btn btn-outline save-btn">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 无图布局广告 -->
        <h2 class="h4 mb-3 text-muted">服务推荐</h2>
        <div class="ad-card ad-no-image">
            <div class="ad-content">
                <span class="ad-label">推广</span>
                <h3 class="ad-title">专业家庭保洁服务 - 新用户首单立减50元</h3>
                <p class="ad-description">
                    提供全方位家庭保洁服务，专业团队，自带清洁设备和环保清洁剂。服务包括日常保洁、深度清洁、厨房清洁、卫生间清洁等。预约灵活，不满意免费返工。新用户注册即可获得50元优惠券，有效期30天。
                </p>
                <div class="ad-meta">
                    <div class="meta-item">
                        <i class="far fa-eye"></i> 4.1k 浏览
                    </div>
                    <div class="meta-item">
                        <i class="far fa-comment"></i> 187 评论
                    </div>
                    <div class="meta-item">
                        <i class="far fa-heart"></i> 632 点赞
                    </div>
                    <div class="meta-item">
                        <i class="far fa-star text-warning"></i> 4.8 (245条评价)
                    </div>
                </div>
                <div class="ad-author">
                    <img src="https://picsum.photos/id/1071/100/100" alt="洁净家服务头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">洁净家服务</div>
                        <div class="author-role">生活服务 · 官方认证</div>
                    </div>
                    <button class="action-btn btn-outline">
                        <i class="far fa-user-plus"></i> 关注
                    </button>
                </div>
                <div class="ad-actions">
                    <button class="action-btn btn-primary">
                        <i class="fas fa-calendar-check"></i> 立即预约
                    </button>
                    <button class="action-btn btn-outline like-btn">
                        <i class="far fa-heart"></i> 点赞
                    </button>
                    <button class="action-btn btn-outline save-btn">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞功能
            const likeButtons = document.querySelectorAll('.like-btn');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('active');
                    const icon = this.querySelector('i');
                    
                    if (this.classList.contains('active')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        icon.style.color = 'var(--danger)';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        icon.style.color = '';
                    }
                });
            });
            
            // 收藏功能
            const saveButtons = document.querySelectorAll('.save-btn');
            saveButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('active');
                    const icon = this.querySelector('i');
                    
                    if (this.classList.contains('active')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        icon.style.color = 'var(--primary)';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        icon.style.color = '';
                    }
                });
            });
            
            // 关注按钮功能
            const followButtons = document.querySelectorAll('.action-btn:has(.fa-user-plus)');
            followButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const text = this.childNodes[2].textContent.trim();
                    
                    if (text === '关注') {
                        this.childNodes[2].textContent = ' 已关注';
                        icon.classList.remove('far', 'fa-user-plus');
                        icon.classList.add('fas', 'fa-check');
                        this.classList.remove('btn-outline');
                        this.classList.add('btn-primary');
                    } else {
                        this.childNodes[2].textContent = ' 关注';
                        icon.classList.remove('fas', 'fa-check');
                        icon.classList.add('far', 'fa-user-plus');
                        this.classList.remove('btn-primary');
                        this.classList.add('btn-outline');
                    }
                });
            });
            
            // 按钮点击反馈
            const actionButtons = document.querySelectorAll('.action-btn');
            actionButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    // 排除已经处理过的按钮类型
                    if (!this.classList.contains('like-btn') && 
                        !this.classList.contains('save-btn') &&
                        !this.querySelector('.fa-user-plus') &&
                        !this.querySelector('.fa-check')) {
                        
                        // 模拟加载状态
                        const originalContent = this.innerHTML;
                        this.disabled = true;
                        this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...';
                        
                        setTimeout(() => {
                            this.disabled = false;
                            this.innerHTML = originalContent;
                            // 显示操作成功提示
                            alert('操作成功！');
                        }, 800);
                    }
                });
            });
        });
    </script>
</body>
</html>
    
